<template>
  <div class="setting">
    <el class="title">基础配置</el>
    <div
      class="setting-item"
      v-for="(item, field) in filedSeting.properties"
      :key="item.description"
    >
      <span class="setting-label">{{ item.description }}</span>
      <n-input
        v-model:value="config[field]"
        :disabled="(item as any)?.disabled"
        v-if="isString(item) && typeof item.value === 'string'"
        class="flex-1"
      />
      <n-input-number v-model:value="config[field]" v-if="item.type === 'number'" class="flex-1" />
      <n-switch v-model:value="config[field]" v-if="isBoolean(item)">
        <template #checked>是</template>
        <template #unchecked>否</template>
      </n-switch>
      <n-radio-group v-model:value="config[field]" v-if="item.type === 'radio_group'">
        <n-radio value="text">单行文本</n-radio>
        <n-radio value="textarea">多行文本</n-radio>
      </n-radio-group>
    </div>
    <el class="title">验证规则</el>
    <div v-for="item in filedSeting.rules" :key="item.description" class="setting-rule">
      <div class="setting-item">
        <span class="setting-label">{{ item.description }}</span>
        <n-select v-model:value="item.value" :options="item.options" class="flex-1" />
      </div>
      <template v-if="item.value">
        <div v-for="child in extendsArray(item)" :key="child!.description" class="setting-item">
          <span class="setting-label">{{ child.description }}</span>
          <n-input-number
            v-model:value="child.value"
            class="flex-1"
            clearable
            v-if="child.type === 'number'"
          />
          <n-switch v-model:value="child.value" clearable v-else-if="child.type === 'switch'">
            <template #checked>是</template>
            <template #unchecked>否</template>
          </n-switch>
          <n-select
            v-model:value="child.value"
            :options="child.options"
            class="flex-1"
            v-else-if="child.type === 'select'"
          />
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
const store = useFormStore()
import { isString, isBoolean } from '@/form_config/utils'
import { useFormStore } from '@/stores'
const filedSeting = ref(store.filedConfig)
const config = computed(() => store.config)
const extendsArray = (item: any) => {
  return item.extends[item.value]
}
</script>
<style scoped lang="scss">
.setting {
  @apply w-80 bd p-3 h-100vh;
  .title {
    @apply text-14px pl-2  my-2 bg-black/3 py-1;
    border-left: 4px solid var(--primary-color);
  }
  &-item {
    @apply flex items-center py-3;
  }

  &-label {
    @apply w-18 pr-3 text-right text-xs;
  }
}
.setting-rule {
  .setting-label {
    @apply text-xs;
  }
}
</style>
